<template>
  <div class="box">
    <!-- <div class="left">
      <button @mouseenter="emitEnter" @mouseleave="emitLeave" @click="emitClick">
        触发hover
      </button>
    </div> -->
    <div id="leafer-view" class="lsh-canvas"></div>
    <!-- <div class="right">
    </div> -->
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { Leafer, Rect, PointerEvent, App, Group, MoveEvent, ZoomEvent, Debug, IApp, Event } from 'leafer-ui'
// import {  Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import { EditorEvent } from '@leafer-in/editor'
import { ScrollBar } from '@leafer-in/scroll'
import '@leafer-in/state'
import '@leafer-in/view'

// let leafer;
// onMounted(() => {
//   leafer = new Leafer({ view: 'leafer-view', type: 'editor' })
//   const rect = new Rect({
//     x: 100,
//     y: 100,
//     width: 200,
//     height: 200,
//     fill: 'transparent',
//     draggable: true,
//     editable: true,
//     stroke: "rgba(58, 139, 255, 1)",
//     selectedStyle: {
//       fill: 'rgba(243, 97, 97, 0.6)'
//     },
//     focusStyle: {
//       fill: 'blue'
//     },
//     id: 'test',
//     data: {
//       text: 11,
//     }
//   })
//   rect.on(PointerEvent.ENTER, (e) => {
//     console.log(e)
//     e.target.setAttr('fill', 'red')
//   })
//   rect.on(PointerEvent.LEAVE, (e) => {
//     e.target.setAttr('fill', 'transparent')
//   })
//   rect.on(PointerEvent.CLICK, (e) => {
//     e.target.setAttr('focus', true)
//   })
//   leafer.add(rect)
// })
// const emitEnter = () => {
//   const target = leafer.findId('test');
//   target.emit(PointerEvent.ENTER, { target })
// }
// const emitLeave = () => {
//   const target = leafer.findId('test');
//   target.emit(PointerEvent.LEAVE, { target })
// }
// const emitClick = () => {
//   const target = leafer.findId('test');
//   target.emit(PointerEvent.CLICK, { target })
// }
const list = Array.from(new Array(4000));
const selectList = ref([]);
let app: IApp;
onMounted(() => {
  app = new App({
    view: 'leafer-view',
    editor: {
      circle: {},
      middlePoint: {},
      rotateable: false,
      select: 'tap',
      continuousSelect: true,
    }, // 会自动创建 editor实例、tree层、sky层
    zoom: {
      min: 0.2, max: 3
    },
    // type: 'custom',
    move: {
      scroll: 'limit'
    }
  })
  // new ScrollBar(app, { theme: 'light' })
  // const zoomLayer = new Group({
  //   x: 0,
  //   y: 0,
  // })
  // const listRect = list.map((item, index) => {
  //   return Rect.one({
  //     editable: true,
  //     draggable: true,
  //     fill: 'transparent',
  //     stroke: index % 2 === 1 ? 'rgba(82, 204, 92, 1)' : "rgba(58, 139, 255, 1)",
  //     hoverStyle: {
  //       fill: 'rgba(50,205,121, 0.8)'
  //     },
  //     selectedStyle: {
  //       fill: 'rgba(243, 97, 97, 0.6)'
  //     },
  //     id: `${index}`,
  //   }, 0 + index * 0.2 * Math.random(), 0 + index * 0.3 * Math.random(), 20, 30);
  // })
  // const group = new Group({
  //   children: listRect,
  // })
  // zoomLayer.add(group)
  // app.tree.add(zoomLayer)
  // // 监听框选事件
  // app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => {
  //   app.editor.editBox.opacity = 0;
  //   console.log(app.editor.element)
  //   e.oldList.forEach((item) => {
  //     item.selected = false
  //   })
  //   selectList.value = [];
  //   e.editor.leafList.forEach((item) => {
  //     item.selected = true
  //     // selectList.value.push(item);
  //   })
  //   selectList.value = Object.keys(e.editor.leafList.keys);
  //   if (e.editor.leafList.length === 1) {
  //     app.editor.editBox.opacity = 1;
  //   } else {
  //     // app.editor.cancel();
  //     // app.editor.editBox.clear();
  //   }
  //   // app.editor.cancel();
  //   // app.editor.updateEditBox()
  // })
  // Debug.enable = true
  // app.editor.hoverTarget = app.editor.findId(Math.random() * 100);
  // Debug.showRepaint = true

  // app.editor.on(MoveEvent.BEFORE_MOVE, function (e: MoveEvent) {
  //   //  custom ...
  //   zoomLayer.moveWorld(e.moveX, e.moveY)
  // })

  // app.editor.on(ZoomEvent.BEFORE_ZOOM, function (e: ZoomEvent) {
  //   // custom ...
  //   const center = { x: e.x, y: e.y }
  //   zoomLayer.scaleOfWorld(center, e.scale)
  // })
})
</script>
<style scoped lang='less' >
.box {
  display: flex;
  height: 100%;
  position: relative;
  width: 100%;
  background-color: antiquewhite;

  .left {
    width: 200px;
    background-color: antiquewhite;
  }

  .center {
    flex: 1;
    // flex-shrink: 0;
  }

  .right {
    width: 300px;
    background-color: antiquewhite;
    overflow-y: auto;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
  }

  .lsh-canvas {
    position: absolute;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
  }
}
</style>